<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>国航行李计费界面</title>
<link type="text/css" rel="stylesheet" href="./css/style.css" >
	<link href="https://cdn.bootcss.com/jquery-toast-plugin/1.3.2/jquery.toast.css" rel="stylesheet">
	<script type="text/javascript" src="./script/jquery-1.7.2.js"></script>
<!--	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>-->
	<script src="https://cdn.bootcss.com/jquery-toast-plugin/1.3.2/jquery.toast.min.js"></script>
	<script>



		//使用ajax请求服务器
		var sendFormMessage = function (luggage){
			let serverData;
			$.ajax({
				type :"GET",
				traditional:true,
				url:"http://127.0.0.1:8081/ajaxTest_war_exploded/ServletAjax",
				data:{
					FlightType:$("label:contains('航班类型')+select").val(),
					price: $("label:contains('机票价格')+input").val(),
					Seat: $("label:contains('座舱类型')+select").val(),
					Passenger:$("label:contains('旅客类型')+select").val(),
					Card:$("label:contains('会员卡类型')+select").val(),
					luggageInformation : luggage
				},
				header:"Access-Control-Allow-Origin: *",
				dataType: "text",
				success:function (data){
					showMsg(data,'success',2000);
				},
				error:function (){
					showMsg('请求错误','error',2000);
				}

			})

		}

		var luggageInformationEncapsulation = function (){

			let luggageInformation = [];
			let td = [];
			// 遍历 tr 的各个 td
			// alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+$(this).text()+"。");
			$('#luggageTable tr').each(function(i){                   // 遍历 tr
				$(this).children('td').each(function (j) {
					// alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+$(this).text()+"。");
					if(j===0||j===6){
						// alert("跳过");
						return true;
					}else {
						// alert('进入');
						td[j - 1] = $(this).text();
					}
				});
				luggageInformation[i] = td;
			});
			return luggageInformation;
		}

		/**
		 *
		 * /

		/**
		 * 弹窗提示框
		 * @param text
		 * @param icon
		 * @param hideAfter
		 */
		function showMsg(text, icon, hideAfter) {
			if (heading == undefined) {
				var heading = "提示";
			}
			$.toast({
				text: text,//消息提示框的内容。
				heading: heading,//消息提示框的标题。
				icon: icon,//消息提示框的图标样式。
				showHideTransition: 'fade',//消息提示框的动画效果。可取值：plain，fade，slide。
				allowToastClose: true,//是否显示关闭按钮。(true 显示，false 不显示)
				hideAfter: hideAfter,//设置为false则消息提示框不自动关闭.设置为一个数值则在指定的毫秒之后自动关闭消息提框
				stack: 1,//消息栈。同时允许的提示框数量
				position: 'mid-center',//消息提示框的位置：bottom-left, bottom-right,bottom-center,top-left,top-right,top-center,mid-center。
				textAlign: 'left',//文本对齐：left, right, center。
				loader: true,//是否显示加载条
				//bgColor: '#FF1356',//背景颜色。
				//textColor: '#eee',//文字颜色。
				loaderBg: '#ffffff',//加载条的背景颜色。
			});
		}

		/**
		 * 提示框显示函数
		 * @param x 提示框距离鼠标的水平距离
		 * @param y	提示框距离鼠标的垂直距离
		 * @param $obj	要添加提示框的控件
		 */
		var hintFrame = function (x,y,$obj){
			let hint;
			$obj.mouseover(function (event){
				 hint = this.title;
				this.title='';
				$('body').append("<div id='hintTitle'>"+hint+"</div>");
				$("#hintTitle").css({
					'left':(event.pageX+x+'px'),
					'top':(event.pageY+y+'px')
				}).show();
			}).mouseout(function (){
				this.title = hint;
				$("#hintTitle").remove();
			});
		}


		/**
		 * 显示正确与错误的图片
		 * @param $img 图片标签
		 * @param path	显示的路径
		 * @param message	图片的信息
		 */
		var showImageHint = function ($img,path,message){
			$img.hide();
			$img.attr("src",path);
			$img.attr("title",message);
			$img.show(200);
			$img.off()
			hintFrame(4,4,$img);
		}


		/**
		 * 行李的长、宽、高、重量拦截
		 * @param length 长
		 * @param width	 宽
		 * @param height 高
		 * @param weight 重量
		 * @returns {boolean} true表示输入正确，false则需要拦截
		 */
		var parameterJudge = function (length,width,height,weight){
			var val = $("#selectArea").val();
			var lth = parseFloat(length) ;
			var wth = parseFloat(width);
			var hht = parseFloat(height);
			var wght = parseFloat(weight);
			// alert(lth+" "+wth+" "+hht+" "+wght);
			if(wght<2||lth<=0||wth<=0||hht<=0||wght<=0){
				return false;
			}
			if(val==='area1'){
				if(lth>100||wth>60||hht>40){
					return false;
				}
			}else {
				let total = lth+wth+hht;
				if(total>158){
					return  false;
				}
			}
			return true;
		}


		/**
		 * 行李信息拦截
		 * @returns {boolean} false 表示行李信息输入非法
		 */
		var luggageJudge = function (length,width,height,weight){

			// let  = $("#height").val();
			// let width = $("#width").val();
			// let length = $("#length").val();
			// let weight = $("#weight").val();
			let $img = $("#judgeImg");
			if(isNaN(height)||isNaN(width)||isNaN(length)||isNaN(weight)){
				showImageHint($img,"./img/error.png",'非法输入');
				return false;
			}else if(height===''||weight===''||length===''||width===''){
				showImageHint($img,"./img/Exclamation.png","输入不完整");
				return false;
			}else if(parameterJudge(length,width,height,weight)===false){
				var hint = "托运的行李重量需要超过2kg,输入数字不允许小于或等于零,且国内航班:行李长、宽、高不得超过:100、60、40cm;国外航班行李长宽高总和不得超过158cm"
				showImageHint($img,"./img/light.png",hint);
			}
			else {
				showImageHint($img,"./img/right.png","输入正确");
				return true;
			}
		}

		/**
		 * 给表添加序号
		 */
		var tableResort = function (){
			let $obj = $("#luggageTable tr")
			let len = $obj.length;
			for(let i=1;i<len;i++){
				$("#luggageTable tr:eq("+i+") td:first").text(i);
			}
		}

		$(function (){

			//初始化标签状态
			$("#judgeImg").toggle(); //隐藏判断图片

			$("#aDiv a").click(function (){
				return false;
			});



			$("#selectArea").change(function (){
				var val = $("#selectArea").val();
				if(val==='area1'){
					$("label:contains('机票价格')+input").attr('hidden',false);
					$("label:contains('旅客类型')+select").attr('disabled',false);
					$("label:contains('会员卡类型')+select").attr('hidden',false);
					let len = $("label:contains('座舱类型')+select option").length;
					let type = ['头等舱','公务舱','经济舱']
					for (let i = 0; i < len; i++) {
						$("label:contains('座舱类型')+select option:eq("+i+")").text(type[i]);
					}
				}else {
					$("label:contains('机票价格')+input").attr('hidden',true);
					$("label:contains('旅客类型')+select").attr('disabled',true);
					$("label:contains('会员卡类型')+select").attr('hidden',true);
					let len = $("label:contains('座舱类型')+select option").length;
					let type = ['头等舱/公务舱','悦享经济舱/超级经济舱','经济舱']
					for (let i = 0; i < len; i++) {
						$("label:contains('座舱类型')+select option:eq("+i+")").text(type[i]);
					}
				}
			});

			// 创建一个用于复用的删除的function函数
			var deleteFun = function(){

				// alert("删除 操作 的function : " + this);

				// 在事件响应的function函数中，有一个this对象。这个this对象是当前正在响应事件的dom对象。
				var $trObj = $(this).parent().parent();

				var name = $trObj.find("td:first").text();

				/**
				 * confirm 是JavaScript语言提供的一个确认提示框函数。你给它传什么，它就提示什么<br/>
				 * 当用户点击了确定，就返回true。当用户点击了取消，就返回false
				 */
				if( confirm("你确定要删除[" + name +  "]吗？") ){
					$trObj.remove();
				}
				tableResort();

				// return false; 可以阻止 元素的默认行为。
				return false;
			};

			// 给【Submit】按钮绑定单击事件
			$("#addEmpButton").click(function () {

				// 获取行李信息窗口的内容
				var length = $("#length").val();
				var width = $("#width").val();
				var height = $("#height").val();
				var weight = $("#weight").val();
				var type = $("#luggageType").val();
				if(!luggageJudge(length,width,height,weight)){
					return;
				}
				// 创建一个行标签对象，添加到显示数据的表格中
				var $trObj = $("<tr>" +
						"<td>" + "</td>" +
						"<td>" + length +  "</td>" +
						"<td>" + width + "</td>" +
						"<td>" + height + "</td>" +
						"<td>" + weight + "</td>"+
						"<td>" + type+ "</td>"+
						"<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
						"</tr>");

				// 添加到显示数据的表格中
				$trObj.appendTo( $("#luggageTable") );

				// 给添加的行的a标签绑上事件
				$trObj.find("a").click( deleteFun );
				tableResort();

				//清除文本框中的数据
				let len = $(".inputTable input").length;
				for (let i = 0; i <len ; i++) {
					$(".inputTable input:eq("+i+")").val("");
				}

			});


			// 给删除的a标签绑定单击事件
			$("#luggageTable a").click( deleteFun );


			let $option = $("td:contains('行李类型')");
			hintFrame(4,4,$option);


			//绑定确定按钮
			$("#spanConfirm").click(function () {

				let price = $("label:contains('机票价格')+input").val();
				let priceN = parseFloat(price);
				//判断空置,非法值
				if(price===''||isNaN(priceN)||priceN<=0){
					alert("机票价格填写有误！应当输入大于0的有效数字");
					return;
				}
				//判断行李信息是否为空
				if($("#luggageTable tr").length===1){
					alert('您尚未填写行李信息!');
					return;
				}
				let luggage = luggageInformationEncapsulation();
				sendFormMessage(luggage);
			});


		})
	</script>
</head>
<body>
		<div id="login_header">
			<img class="logo_img" alt="" src="./img/logo.gif" >
		</div>
		
			<div class="login_banner">
			
				<div id="l_content">
					<span class="login_word">国航行李费用计算器</span>
				</div>
				
				<div id="content">
					<div class="login_form">
						<div class="login_box">
							<div class="msg_cont">
								<b></b>
								<span class="errorMsg">请输入旅客信息</span>
							</div>
							<div class="form">
									<label><img title="①区域1:美洲（除美国/加拿大外）/加勒比海地区与欧洲/非洲/中东/亚洲/西南太平洋之间的航线；
②区域2:欧洲/中东与非洲/亚洲/西南太平洋之间航线；日本与西南太平洋之间航线；日本/西南太平洋与亚洲（不含日本及西南太平洋）/非洲之间航线；
③区域3:加拿大与美洲（除美国/加拿大外）/加勒比海地区/欧洲/非洲/中东/亚洲/西南太平洋之间航线；
④区域4:美国（含夏威夷）与美洲（除美国外）/加勒比海地区/欧洲/非洲/中东/亚洲/西南太平洋之间航线；
⑤区域5:非洲与亚洲（除日本外)之间航线；欧洲与中东之间航线；亚洲（除日本)内航线；美洲（除美国/加拿大）及加勒比海地区内航线；上述未列明的航线;" src="./img/qMark.png" class="pmark" id="pmark">航班类型：</label>
									<select class="select_form" id="selectArea">
										<option selected="selected" value="area1">国内航班</option>
										<option value="area2">区域1</option>
										<option value="area3">区域2</option>
										<option value="area4">区域3</option>
										<option value="area5">区域4</option>
										<option value="area6">区域5</option>
									</select>
									<br />
									<br />
<!--									<label>行李件数：</label>-->
<!--									<input id="luggageText" class="itxt" type="text" placeholder="行李件数" autocomplete="off" tabindex="1" name="username" />-->
<!--									<br />-->
<!--									<br />-->
									<label>机票价格：</label>
									<input class="itxt" type="text" placeholder="机票价格" autocomplete="off" tabindex="1" name="username" />
									<br />
									<br />
									<label>座舱类型：</label>
									<select class="select_form">
										<option selected="selected"  value="头等舱">头等舱</option>
										<option value="经济舱1">公务舱 </option>
										<option value="经济舱2">经济舱</option>
									</select>
									<br />
									<br />
									<label>旅客类型：</label>
									<select class="select_form">
										<option selected="selected" value="OrdinaryPassenger">普通旅客</option>
										<option value="Child">婴儿、儿童</option>
									</select>
									<br />
									<br />
									<label>会员卡类型：</label>
									<select class="select_form">
										<option selected="selected" value="N">普通会员卡</option>
										<option value="Y">凤凰知音终身白金卡/白金卡</option>
										<option value="Y">凤凰知音金卡/银卡</option>
										<option value="Y">星空联盟卡</option>
									</select>
									<br />
									<br />
<!--									<input type="button" value="确定" id="sub_btn" />-->
									<div id="aDiv">
										<a href="xxx.html"><span id="spanConfirm">确定</span></a>
									</div>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		<div id="tableDiv">
			<table id="luggageTable">
				<tr>
					<th>编号</th>
					<th>长（单位:cm）</th>
					<th>宽（单位:cm）</th>
					<th>高（单位:cm）</th>
					<th>重量（单位:kg）</th>
					<th>行李类型</th>
					<th>&nbsp;</th>
				</tr>
			</table>

			<div id="formDiv">
				<h4>输入行李信息<span><img id="judgeImg"></span></h4>
				<table class="inputTable">
					<tr>
						<td class="word">长: </td>
						<td class="inp">
							<input type="text" name="empName" id="length" placeholder="单位：cm" />
						</td>
					</tr>
					<tr>
						<td class="word">宽: </td>
						<td class="inp">
							<input type="text" name="email" id="width" placeholder="单位：cm"/>
						</td>
					</tr>
					<tr>
						<td class="word">高: </td>
						<td class="inp">
							<input type="text" name="salary" id="height" placeholder="单位：cm"/>
						</td>
					</tr>
					<tr>
						<td class="word">重量: </td>
						<td class="inp">
							<input type="text" name="salary" id="weight" placeholder="单位：kg" />
						</td>
					</tr>
					<tr>
						<td >类型行李:</td>
						<td class="inp">
							<select class="select_form" id="luggageType">
								<option value="normal" selected="selected">普通行李</option>
								<option disabled="disabled">**特殊行李**</option>
								<option value="Free" >可免费运输的特殊行李</option>
								<option disabled="disabled">==运动器械器具==</option>
								<option value="SportsEquipment1">运动器械器具:类型1</option>
								<option value="SportsEquipment2">运动器械器具:类型2</option>
								<option value="SportsEquipment3">运动器械器具:类型3</option>
								<option disabled="disabled">==其他==</option>
								<option value="other1">其他:类型1</option>
								<option value="other2">其他:类型2</option>
								<option value="other3">其他:类型3</option>
								<option value="other4">其他:类型4</option>
								<option value="other5">其他:类型5</option>
							</select>
							<img src="./img/qMark.png"
								 title="特殊行李类型:
①可免费运输的特殊行李:
残疾、伤、病旅客可免费托运一件小型可放入客舱的辅助设备，或一件手动轮椅。除此之外，还可以免费运输一件辅助设备，包括但不限于以下物品：
电动轮椅/电动代步工具/手动轮椅；
机械假肢及专用小型气瓶；
心脏起搏器或其他植入人体的装置；
便携式氧气浓缩机（POC）；
持续正压呼吸机（CPAP）；
其它内含锂电池的辅助设备等。
婴儿旅客（无论何种舱位）可免费托运一件折叠式婴儿车或摇篮或婴儿汽车安全座椅。
导盲犬/助听犬/精神抚慰犬
骨灰
②运动器械器具
类型1:高尔夫球包、保龄球、滑翔伞/降落伞、滑雪/滑水用具（不包括雪橇/水撬）、轮滑/滑板用具、潜水用具、射箭用具、曲棍球用具、冰球用具、网球用具、登山用具、自行车
类型2:皮划艇/独木舟、悬挂式滑翔运动用具、雪橇/水撬。冲浪板、风帆冲浪用具、橡皮艇或船
类型3:撑杆、标枪、单独包装的划船用具或浆、骑马用具
③其他
类型1:睡袋、背包、野营用具、渔具、乐器、辅助设备（非残疾、伤、病旅客托运）、可折叠婴儿床、可折叠婴儿车或婴儿摇篮或婴儿汽车安全座椅（非婴儿旅客托运）
类型2:小型电器或仪器、媒体设备
类型3:可作为行李运输的枪支
类型4:可作为行李运输的子弹
类型5:小动物（仅限家庭驯养的猫、狗）
详情请查看附件1
" class="pmark" id="pmark2">
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<button id="addEmpButton" value="abc">
								Submit
							</button>

						</td>

					</tr>
					<tr>
						<td>
							<a title="查看特殊行李政策" style="font-size: small" target="_blank" href="./pages/pdf.html">附件1</a>
						</td>
					</tr>
				</table>

			</div>
		</div>
		<div id="bottom">
			<span>
				京ICP证 030872号-1 Copyright 2012 Air China, All Rights Reserved
			</span>
		</div>
</body>
</html>